<template>
  <div ref="imageDom" class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- title文字 -->
    <div v-if="this.display" class="title">
      <div class="p1">制作独一份的圣诞贺卡</div>
      <div class="p2">送给你的心上人</div>
    </div>
    <!-- /title文字 -->

    <!-- 贺卡图片区 -->
    <div class="main">
      <p class="dear">Dear</p>
      <p class="name1" v-if="this.display">家人</p>
      <p class="content" v-if="this.display">
        圣诞快乐
        <br />平安~喜乐~
      </p>
      <p class="from">From</p>
      <p class="name2" v-if="this.display">小欣</p>

      <!-- 内容输入区 -->
      <input v-model="inputName" maxlength="4" type="text" class="input-name" />
      <textarea
        v-if="textareaDisplay"
        v-model="inputContent"
        maxlength="20"
        cols="30"
        rows="2"
        class="input-content"
      ></textarea>
      <input v-model="inputToName" maxlength="4" type="text" class="input-to-name" />
      <!-- /内容输入区 -->
    </div>
    <!-- /贺卡图片区 -->

    <!-- 生成内容区 -->
    <p v-show="this.qrDisplay" class="generateContent">{{inputContent}}</p>
    <!-- /生成内容区 -->

    <!-- 提示长按图片 -->
    <!-- <p v-if="tipDisplay" class="tip">长按图片保存，分享！</p> -->
    <!-- /提示长按图片 -->

    <!-- 叉号关掉图片 -->
    <div class="cancellIcon">
      <i class="circleIcon"></i>
      <i class="line01"></i>
      <i class="line02"></i>
    </div>
    <!-- /叉号关掉图片 -->

    <!-- 生成图片显示区 -->
    <img v-if="this.imgDisplay" :src="imgUrl" alt class="generateImg" />
    <!-- /生成图片显示区 -->

    <!-- 右下角雪花图标 -->
    <img v-show="this.qrDisplay" src="../assets/111.jpg" alt class="iceIcon01" />
    <img v-show="this.qrDisplay" src="../assets/111.jpg" alt class="iceIcon02" />
    <!-- 图标内按钮 -->
    <p v-show="this.qrDisplay" class="iceIconCentent01">
      长按识别右边二维码
      <br />快乐圣诞送给她/他
    </p>
    <!-- /图标内按钮 -->
    <!-- /右下角雪花图标 -->

    <!-- 生成二维码 -->
    <vue-qr v-show="this.qrDisplay" :size="50" :logoScale="20" :text="codeValue" :margin="0" :dotScale="1" class="qrcode"></vue-qr>
    <!-- /生成二维码 -->

    <!-- 按钮区域 -->
    <div v-if="this.buttonDisplay" class="button" @click="click">
      <p>{{buttonContent}}</p>
    </div>
    <!-- /按钮区域 -->
  </div>
</template>

<script>
// import HelloWorld from '@/components/HelloWorld.vue'
// 导入页面截图生成插件
import html2canvas from 'html2canvas'
import vueQr from 'vue-qr'

export default {
  name: 'home',
  data () {
    return {
      // 控制name1与content显示隐藏
      display: true,
      flag: true,
      buttonContent: '开始写贺卡',
      // 输入的姓名
      inputName: '',
      // 输入的内容
      inputContent: '',
      // 发送至人姓名
      inputToName: '',
      imgUrl: '',
      imgDisplay: false,
      buttonDisplay: true,
      qrDisplay: false,
      codeValue: '',
      textareaDisplay: false,
      // 提示文字的显隐
      tipDisplay: true
      // codeValue: this.$route.path
    }
  },
  methods: {
    // 按钮点击事件
    click () {
      if (this.flag) {
        this.display = false
        this.flag = false
        this.buttonContent = '保存'
        this.textareaDisplay = true
        console.log('T')
      } else {
        this.textareaDisplay = false
        this.buttonDisplay = false
        this.qrDisplay = true
        // 延迟加载解决DOM未加载完情况
        setTimeout(() => {
          this.clickGeneratePicture()
        }, 10)
      }
    },
    // 生成图片
    clickGeneratePicture () {
      this.imgDisplay = true
      html2canvas(this.$refs.imageDom, {
        backgroundColor: '#125A4F'
      }).then(canvas => {
        // 转成图片，生成图片地址
        this.imgUrl = canvas.toDataURL('image/jpg')
      })
    }
  },
  created () {
    // var src1 = window.location.href
    var src1 = 'http://www.baidu.com/#/download'
    console.log(src1)
    var src2 = this.$route.path
    console.log(src2)
    var src3 = src1.replace(src2, '/download')
    console.log(src3)
    this.codeValue = src3
  },
  components: {
    vueQr
  }
}
</script>

<style lang="less">
.home {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("../assets/bg@2x.png");
  background-size: 100% 100vh;
  // background: #125A4F;

  // 标题文字
  .title {
    .p1 {
      position: absolute;
      margin: 0;
      top: 17%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      font: 400 0 my-font;
      color: #e6cd98;
      font-size: 60px;
      text-align: center;
      width: 400px;
    }
    .p2 {
      position: absolute;
      margin: 0;
      // margin-top: 8px;
      top: 24%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      font: 400 0 my-font;
      color: #e6cd98;
      font-size: 60px;
      text-align: center;
      width: 460px;
    }
  }

  // 中央贺卡区
  .main {
    .input-name {
      position: absolute;
      padding: 0px 10px;
      top: 68%;
      left: 64%;
      outline-style: none;
      border: 0px solid #ccc;
      width: 27%;
      font: 400 40px my-font;
      font-size: 50px;
      color: #e6cd98;
      // 背景透明
      background: transparent;
      // 取消边框
      border-style: none;
      // text-align: center;
    }
    // 输入的name1
    .input-to-name {
      position: absolute;
      padding: 0px 10px;
      top: 48%;
      left: 30%;
      outline-style: none;
      border: 1px solid #ccc;
      width: 27%;
      font: 400 40px my-font;
      font-size: 50px;
      color: #e6cd98;
      border-style: none;
      // 背景透明
      background: transparent;
      // 取消边框
      border-style: none;
    }
    // 输入的内容
    .input-content {
      position: absolute;
      padding: 0px 10px;
      top: 54%;
      left: 16%;
      width: 70%;
      border-style: none;
      font: 400 40px my-font;
      // 取消右下角标
      resize: none;
      background: transparent;
      border: 0px solid #ccc;
      outline-style: none;
      color: #e6cd98;
      line-height: 75px;
      font-size: 50px;
      height: 10%;
      // .van-field__control{
        // text-align: left;
      // }
    }
    // 输入的写信人姓名
    .from {
      position: absolute;
      margin: 0;
      top: 68%;
      left: 49%;
      width: 20%;
      font: 400 0 my-font;
      color: #e6cd98;
      font-size: 50px;
      text-align: center;
    }
    .dear {
      position: absolute;
      margin: 0;
      width: 20%;
      top: 46%;
      left: 10%;
      font: 400 0 my-font;
      color: #e6cd98;
      font-size: 80px;
      text-align: center;
    }
    .name1 {
      position: absolute;
      margin: 0;
      width: 100%;
      top: 46%;
      left: 30%;
      font: 400 0 my-font;
      color: #e6cd98;
      font-size: 80px;
    }
    .content {
      position: absolute;
      margin: 0;
      width: 100%;
      top: 52%;
      left: 0;
      font: 400 0 my-font;
      color: #e6cd98;
      font-size: 80px;
      text-align: center;
    }

    .name2 {
      position: absolute;
      margin: 0;
      width: 59%;
      top: 66%;
      left: 45%;
      font: 400 0 my-font;
      color: #e6cd98;
      font-size: 80px;
      text-align: center;
    }
  }

  // 提示文字
  .tip{
    position: absolute;
    width: 70%;
    height: 5%;
    top: 10%;
    left: 64%;
    transform: translate(-50%, -50%);
    z-index: 999;
    font: 400 0.53333rem my-font;
    color: #e6cd98;
  }
  .cancellIcon{
    .circleIcon{

    }
    .line01{

    }
    .line02{

    }
  }
  // 生成图片
  .generateImg {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
  }
  // 生成的内容
  .generateContent{
    position: absolute;
    margin: 0;
    top: 54%;
    left: 17%;
    width: 68%;
    font: 400 40px my-font;
    color: #e6cd98;
    line-height: 75px;
    font-size: 50px;
  }

  // 雪花图标
  .iceIcon01 {
    position: absolute;
    width: 20%;
    height: 2%;
    top: 89%;
    left: 68%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 999;
  }
  .iceIcon02 {
    position: absolute;
    width: 20%;
    height: 2%;
    top: 94%;
    left: 68%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 999;
  }
  // 雪花内文字
  .iceIconCentent01 {
    margin: 0;
    position: absolute;
    width: 20%;
    height: 2%;
    top: 90%;
    left: 58%;
    z-index: 999;
    font-size: 8px;
    color: white;
  }
  // 二维码框
  .qrcode {
    background: #999;
    margin: 0;
    position: absolute;
    width: 15%;
    height: 8%;
    top: 87%;
    left: 79%;
    z-index: 999;
  }

  // 底部button按钮
  .button {
    position: absolute;
    padding: 0px 10px;
    top: 83%;
    left: 50%;
    width: 280px;
    height: 80px;
    transform: translate(-50%, -50%);
    text-align: center;
    background: #e6cd97;
    border: 3px double #125a4f;
    // box-shadow: 0px 0px 5px #888888;
    border-radius: 5px;
    p {
      margin: 0;
      font: 500 30px my-font;
      color: #125a4f;
      font-size: 50px;
      text-align: center;
      height: 40px;
      line-height: 80px;
    }
  }
}
</style>
